import React, { useState, useEffect, forwardRef } from 'react'
import { Form, Select, Input } from 'antd'
import { getAllRight } from '../../utils/request/get'

const RoleForm = forwardRef((props, ref) => {
    const [form] = Form.useForm()
    const [isDisabled, setIsDisabled] = useState(false)
    const [rights, setRights] = useState([])
    const { isUpdateDisable } = props

    useEffect(() => {
        async function fetchData() {
            const res = await getAllRight()
            setRights(res.data.rights)
        }
        fetchData()
    }, [])

    useEffect(() => {
        setIsDisabled(isUpdateDisable)
    }, [isUpdateDisable])

    return (
        <Form
            ref={ref}
            form={form}
            layout="vertical"
            name="form_in_modal"
        >
            <Form.Item
                name="roleName"
                label="角色名"
                rules={[{
                    required: true,
                    message: '请输入角色名'
                }]}
            ><Input /></Form.Item>
            <Form.Item label="享有权限" name="right"
                rules={isDisabled ? [] : [{
                    required: true,
                    message: '请选择角色拥有的权限'
                }]}
            >
                <Select placement='topLeft' disabled={isDisabled}>
                    {
                        rights && rights.map(item => {
                            return <Select.Option
                                key={item.id} value={item.id}>
                                {item.title}</Select.Option>
                        })
                    }
                </Select>
            </Form.Item>
        </Form>
    )
})

export default RoleForm